<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素居中对齐</title>
    <!--元素居中对齐-->
    <!--要水平居中对齐一个元素(如 <div>), 可以使用 margin: auto;。-->
    <!--设置到元素的宽度将防止它溢出到容器的边缘。-->
    <!--元素通过指定宽度，并将两边的空外边距平均分配：-->
    <!--div 元素是居中的-->
    <!--注意: 如果没有设置 width 属性(或者设置 100%)，居中对齐将不起作用。-->
    <style>
        .center
        {
            margin: auto;
            width: 60%;
            border: 3px solid #73AD21;
            padding: 10px;
        }
    </style>
    </head>
<body>
<h2>元素居中对齐</h2>
<p>水平居中块级元素（如div），可以使用margin:auto;</p>

<div class="center">
    <p><b>注意：</b>使用margin：auto无法兼容IE8，除非！DOCTYPE已经声明。</p>
</div>
</body>
</html>